<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="capacity">
  <div class="capacity-item backup-storage-unit">
    <div
      class="capacity-header jumpable"
      (click)="navigate([RouterUrl.SystemInfrastructureNasBackupStorage])"
    >
      <div class="icon"></div>
      <div class="title navigator">
        {{ 'system_backup_storage_unit_label' | i18n }}
        <span>({{ backupStorageUnits.storageNum }}) </span>
      </div>
      <svg width="16" height="16" style="fill:#808080">
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#lv-icon-arrow-next"
        ></use>
      </svg>
    </div>

    <div class="capacity-body">
      <div class="capacity-chart">
        <capacity-chart
          [percent]="backupStorageUnits.percent"
          color="#3388FF"
          warningColor="#FA8241"
        ></capacity-chart>
      </div>
      <div class="detail">
        <div>
          <span class="used"
            >{{ 'common_home_used_label' | i18n }}
            {{ backupStorageUnits.usedCapacity }}</span
          >
          <span class="all">/{{ backupStorageUnits.totalCapacity }}</span>
        </div>
        <div class="notUsed">
          {{ 'common_home_remaining_label' | i18n }}
          {{ backupStorageUnits.freeCapacity }}
        </div>
      </div>
    </div>
  </div>

  <div class="split-line"></div>

  <div class="capacity-item replication-cluster">
    <div
      class="capacity-header jumpable"
      (click)="
        navigate([RouterUrl.SystemInfrastructureClusterManagement], {
          queryParams: { type: 'copy' }
        })
      "
    >
      <div class="icon"></div>
      <div class="title navigator">
        {{ 'system_replication_cluster_label' | i18n }}
        <span>({{ copyList.total }})</span>
      </div>
      <svg width="16" height="16" style="fill:#808080">
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#lv-icon-arrow-next"
        ></use>
      </svg>
    </div>
    <ng-container *ngIf="copyList.total">
      <div class="capacity-body">
        <div class="capacity-chart">
          <capacity-chart
            [percent]="copyList?.percent"
            color="#2EB6E6"
            warningColor="#FA8241"
          ></capacity-chart>
        </div>
        <div class="detail">
          <div>
            <span class="used"
              >{{ 'common_home_used_label' | i18n }}
              {{ copyList?.usedCapacity }}</span
            >
            <span class="all">/{{ copyList?.totalCapacity }}</span>
          </div>
          <div class="notUsed">
            {{ 'common_home_remaining_label' | i18n }}
            {{ copyList?.freeCapacity }}
          </div>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="copyList.total === 0">
      <div class="empty-box">
        <lv-empty
          [lvDescription]="'common_home_no_copy_cluster_label' | i18n"
        ></lv-empty>
      </div>
    </ng-container>
  </div>

  <div class="split-line"></div>

  <div class="capacity-item archive-repository">
    <div
      class="capacity-header jumpable"
      (click)="navigate([RouterUrl.SystemInfrastructureArchiveStorage])"
    >
      <div class="icon"></div>
      <div class="title navigator">
        {{ 'common_home_archive_storage_library_label' | i18n }}
      </div>
      <svg width="16" height="16" style="fill:#808080">
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="#lv-icon-arrow-next"
        ></use>
      </svg>
    </div>

    <div class="capacity-body">
      <div class="object-storage">
        <div class="text">
          <span class="title">{{
            'common_home_object_storage_label' | i18n
          }}</span>
          <span class="percent" *ngIf="isShowOBS">{{ cloudStorageInfo.percent || 0 }}%</span>
        </div>
        <div class="chart" *ngIf="isShowOBS">
          <div
            class="used-chart"
            [ngStyle]="{width: cloudStorageInfo.percent + '%'}"
          ></div>
        </div>
        <div class="used">
          {{ 'common_home_used_label' | i18n }}
          {{ cloudStorageInfo.usedCapacity }}<span class="all">/{{ cloudStorageInfo.totalCapacity }}</span>
        </div>
        <div class="notUsed">
          {{ 'common_home_remaining_label' | i18n }}
          {{ cloudStorageInfo.freeCapacity }}
        </div>
        <div class="taped" *ngIf="showTape">
          <div>{{ 'common_home_tapes_label' | i18n }}</div>
          <div class="taped-used">
            {{ 'common_home_used_label' | i18n }} {{ tapeInfo.usedCapacity }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
